<template>
  <view>
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view solt="top">
        <u-navbar title="往期邀请" height="50" title-size="36"></u-navbar>
      </view>
      <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      <view class="warpper">
        <view class="message-box" v-for="(item, index) in itemList" :key="index">
          <view class="team-list">
            <view class="dis-flex flex-y-between">
              <view class="my-title">{{ item.month }}月邀请</view>
            </view>
            <share-monthly :user-count="item"></share-monthly>
          </view>
        </view>
      </view>
    </z-paging>

    <u-popup v-model="show" height="320" border-radius="15" mode="bottom">
      <view class="popup-box">
        <view class="btn btn-desc"> 确认取消关注该用户？ </view>
        <view class="btn btn-confirm"> 取消关注 </view>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
        <view class="btn" @click="show = !show"> 取消 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import ShareMonthly from '@/users/components/share-monthly.vue'

export default {
  components: {
    ShareMonthly
  },
  data() {
    return {
      show: false,
      imgStyle: {
        width: '12rem'
      },
      itemList: []
    }
  },
  onLoad() {
    this.queryList()
  },
  methods: {
    queryList(page, pageSize) {
      this.initData(page, pageSize)
    },
    initData(page, pageSize) {
      let self = this
      self.$u
        .get('/app-api/brokerage/user/get-summary-by-last-half-year', {
          limit: pageSize,
          page: page
        })
        .then((res) => {
          this.$refs.paging.complete(res.data)
        })
        .catch((res) => {
          self.onOrderLoad(self.current, null, false)
        })

      //this.onOrderLoad(this.current, this.itemList, false);
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    toBalance() {
      this.$u.route('/attract/income-list')
    },
    toTeams() {
      this.$u.route('users/teams/index')
    }
  }
}
</script>

<style lang="scss" scoped>
.team-list {
  width: 710rpx;
  border-radius: 30rpx;
  margin: 0 20rpx;
  display: flex;
  flex-flow: column;
  padding: 30rpx 20rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  height: 220rpx;
  justify-content: space-between;

  .my-title {
    font-size: 34rpx;
    color: #333333;
    line-height: 32rpx;
  }
}
</style>
